<template>
  <div ref="boxwrap" class="moudel-chart YieldCount">
    <div :id="id" :width="chartStyle.width" :height="chartStyle.height" class="chart" />
  </div>
</template>

<script>
import resize from '@/components/Charts/mixins/resize'
import { getYieldCount } from '@/api/screen'
export default ({
  name: 'YieldCount',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '150px'
    },
    height: {
      type: String,
      default: '150px'
    },
    isresize: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: 'YieldCount',
      chart: null,
      chartStyle: {
        width: '100%',
        height: '100%'
      },
      resData: null,
      color: {
        c1: ['rgba(89,224,1,1)', 'rgba(158,58,226, 1)'],
        c2: ['rgba(89,224,1,0.6)', 'rgba(158,58,226, 0.6)'],
        c3: ['rgba(89,224,1,0.1)', 'rgba(158,58,226, 0.1)']
      },
      fontColor: '#bebebe',
      currentView: {},
      timer: null,
      refreshInterval: 1000 * 60 * 5
    }
  },
  // computed: {
  //   ...mapGetters([
  //     'regionid',
  //     'lineId'
  //   ])
  // },
  watch: {
    width: {
      immediate: true,
      handler: function(newval, oldval) {
        this.width = newval
      },
      deep: true
    },
    height: {
      immediate: true,
      handler: function(newval, oldval) {
        this.height = newval
      },
      deep: true
    },
    isresize(newval, oldval) {
      // console.log('YieldCount', newval, oldval)
      this.movement = newval
      this.chart.resize()
    }
  },
  mounted() {
    this.getDomHeight()
    this.domResize()
    // this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null

    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
  },
  created() {
    this.getCurrentView()
    if (this.$route.path.indexOf('/screen') !== -1) {
      this.dataRefresh()
    }
  },
  methods: {
    getDomHeight() {
      this.chartStyle = {
        width: this.$refs.boxwrap.clientWidth + 'px',
        height: this.$refs.boxwrap.clientHeight + 'px'
      }
    },
    domResize() {
      const that = this
      const dom = this.$refs.boxwrap
      this.$erd.listenTo(dom, function(element) {
        var width = element.clientWidth + 'px'
        var height = element.clientHeight + 'px'
        that.chartStyle = {
          width,
          height
        }
      })
    },
    getCurrentView() {
      this.currentView = {
        regionid: this.$Cookies.get('currentReginid'),
        lineId: this.$Cookies.get('currentLineId')
      }
      this.getData()
    },
    getData() {
      getYieldCount(this.currentView).then(response => {
        this.resData = response.data

        const timeArr = []
        const seriesData = []
        for (const key in this.resData) {
          const item = this.resData[key]
          const temp = []
          for (let i = 0; i < item.length; i++) {
            timeArr.push(item[i].targetDate.substring(5))
            temp.push(item[i].yield)
          }
          seriesData.push({
            name: key,
            data: temp
          })
        }
        const xdata = Array.from(new Set(timeArr))

        const list = []
        for (let i = 0; i < seriesData.length; i++) {
          list.push({
            name: seriesData[i].name,
            type: 'line',
            showAllSymbol: true,
            symbol: 'circle',
            lineStyle: {
              color: this.color.c1[i],
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5
            },
            label: {
              show: true,
              position: 'insideTopLeft',
              formatter: '{c}%',
              color: this.fontColor
            },
            connectNulls: false,
            data: seriesData[i].data
          })
        }

        this.initChart(xdata, list)
      })
    },
    initChart(xdata, list) {
      this.chart = this.$echarts.init(document.getElementById(this.id), 'jyt-dark')
      this.chart.setOption({
        color: this.color.c1,
        grid: {
          top: '20%',
          left: '4%',
          right: '10%',
          bottom: '15%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          confine: true,
          formatter: (params) => {
            let html = `<div style="font-weight: bold;">${params[0].axisValueLabel}</div>`
            for (let i = 0; i < params.length; i++) {
              html += `${params[i].marker}<span style="margin-right: 10px;">${params[i].seriesName}</span><span style="font-weight: bold;">${params[i].value}%</span> <br>`
            }
            return html
          }
        },
        dataZoom: [{
          show: true,
          type: 'inside',
          bottom: 10,
          height: 10,
          start: 0,
          end: xdata.length >= 15 ? 30 : 100
        }, {
          show: true,
          height: 10,
          bottom: 10,
          start: 0,
          end: xdata.length >= 15 ? 30 : 100
        }],
        legend: {
          orient: 'vertical',
          textStyle: {
            color: this.fontColor,
            align: 'right'
          },
          right: 0,
          top: 0,
          padding: 0,
          itemWidth: 15,
          itemHeight: 10
        },
        xAxis: [{
          name: '时间',
          type: 'category',
          boundaryGap: false,
          data: xdata,
          nameGap: 5
        }],
        yAxis: [{
          name: '良率',
          nameGap: 5,
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            show: true
          },
          axisLabel: {
            show: true,
            formatter: '{value}%'
          },
          axisTick: {
            show: false
          },
          min: 'dataMin',
          max: 'dataMax'
        }],
        series: list

      })
    },
    dataRefresh() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      if (this.chart) {
        this.chart.dispose()
        this.chart = null
      }

      this.timer = setTimeout(() => {
        this.getData()
        this.dataRefresh()
      }, this.refreshInterval)
    }
  }
})
</script>

<style lang="scss">
  .moudel-chart{
    width: 100%;
    height: 100%;
    > div {
          width: 100%;
    height: 100%;
    }
  }
</style>
